<template>
	<view class="animate__fadeIn animate__fast" style="background-color: #F5F5F5;">
		
		<loading-plus v-if="beforeReady"></loading-plus>
		
		<uni-nav-bar 
		:statusBar="true"
		:right-text="isedit ? '完成' : '编辑'" 
		title="购物车"
		:shadow="false"
		@clickRight="isedit = !isedit"
		:fixed="true"></uni-nav-bar>
		
		<!-- 购物车为空 -->
		<view class="py-5 d-flex a-center j-center bg-white border"
		v-if="disableSelectAll">
			<view class="iconfont icon-gouwuche text-light-muted"
			style="font-size: 50upx;"></view>
			<text class="text-light-muted mx-2">购物车为空</text>
			<view class="px-2 py-1 border border-light-secondary rounded"
			hover-class="bg-light-secondary">
				<text>去逛逛</text>
			</view>
		</view>
		
		<!-- 购物车列表 -->
		<view class="bg-white px-2"
		v-else="!disableSelectAll">
			<!-- 列表 -->
			<view class="d-flex a-center py-3 border-bottom border-light-secondary"
			v-for="(item, index) in list" :key="index">
				<label class="radio d-flex a-center j-center flex-shrink" 
				style="width: 80upx;height: 80upx;"
				@click="selectItem(index)">
					<radio :value="item.id" color="#FD6801"
					:checked="item.checked"
					></radio>
				</label>
				<image :src="item.cover"
				style="height: 150rpx;width: 150rpx;"
				class="border rounded p-2 flex-shrink"></image>
				<view class="flex-1 d-flex flex-column pl-2">
					<view class="text-dark"
					style="font-size: 35rpx;">
						{{item.title}}
					</view>
					<!-- 规格属性 -->
					<view class="d-flex text-light-muted mb-1 "
					:class="isedit ? 'p-1 bg-light-secondary mb-2' : ''"
					@tap.stop="doShowPopup(index)">
						<text class="mr-1"
						v-for="(attr, attrIndex) in item.attrs"
						:key="attrIndex">{{attr.list[attr.selected].name}}</text>
						<view class="iconfont icon-bottom font ml-auto"
						v-if="isedit"></view>
					</view>
					<view class="mt-auto d-flex j-sb">
						<price>{{item.pprice}}</price>
						<view class="a-self-end">
							<uni-number-box :min="item.minnum" 
							:max="item.maxnum"
							:value="item.num"
							@change="changeNum($event, item, index)"></uni-number-box>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<!-- 推荐标题 -->
		<view class="text-center main-text-color font-lg font-weight mt-5">
			<text>为你推荐</text>
		</view>
		<view class="position-relative d-flex a-center j-center text-secondary mb-3 pt-2">
			<view style="background-color: #F5F5F5;z-index: 2;" class="px-2 position-absolute">买的人还买了</view>
			<view class="position-absolute " 
			style="height: 1upx; left: 0;right: 0;background-color: #DDDDDD;"></view>
		</view>
		<!-- 为你推荐 -->
		<view class="row j-sb bg-white">
			<common-list v-for="(item, index) in hotList" :key="index"
			:item="item" :index="index">
			</common-list>
		</view>
		
		<!-- 占位 -->
		<view class="" style="height: 100upx;"></view>
		<!-- 合计 -->
		<view class="d-flex a-center position-fixed left-0 right-0 bottom-0 border-top border-light-secondary a-stretch bg-white"
		style="height: 100upx;z-index: 100;">
			<label class="radio d-flex a-center j-center flex-shrink"
			style="width: 100upx;height: 100upx;"
			@click="doSelectAll"
			>
				<radio color="#FD6801"
				:checked="checkedAll"
				:disabled="disableSelectAll"
				></radio>
			</label>
			<template v-if="!isedit">
				<view class="flex-1 d-flex a-center j-center">
					<text class="font-md">合计</text>
					<price>{{totalPrice}}</price>
				</view>
				<view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md"
				hover-class="main-bg-hover-color"
				@tap="orderConfirm"
				>
					<text>结算</text>
				</view>
			</template>
			<template v-else>
				<view class="flex-1 d-flex a-center j-center main-bg-color text-white">
					移入收藏
				</view>
				<view class="flex-1 d-flex a-center j-center bg-danger text-white font-md"
				hover-class="main-bg-hover-color"
				@tap="doDelGoods"
				>
					<text>删除</text>
				</view>
			</template>
		</view>
		
		<!-- 属性弹出层 -->
		<common-popup :popupClass="popupShow" @hide="doHidePopup">
			<!-- 上部分 -->
			<view class="d-flex a-center" style="height: 275rpx;">
				<image src="/static/images/demo/cate_02.png"
				class="border rounded"
				style="width: 180rpx;height: 180rpx;"
				mode="widthFix"></image>
				<view class="pl-2">
					<price priceSize="font-lg" unitSize="font">{{popupData.pprice}}</price>
					<view class="d-block">
						<text class="mr-1"
						v-for="(attr, attrIndex) in popupData.attrs"
						:key="attrIndex">{{attr.list[attr.selected].name}}</text>
					</view>
				</view>
			</view>
			<!-- 表单部分 -->
			<scroll-view scroll-y="true" class="w-100" style="height: 660rpx;">
				<card :title="item.title" :titleWeight="false" :headBorderBottom="false"
				v-for="(item, index) in popupData.attrs" :key="index">
					<zcm-radio-group :label="item" 
					:selected.sync='item.selected'></zcm-radio-group>
				</card>
				<view class="d-flex flex-row j-sb a-center p-2 border-top border-secondary">
					<text>购买数量</text>
					<uni-number-box :min="1" :value="popupData.num"
					@change="popupData.num = $event"></uni-number-box>
				</view>
				
			</scroll-view>
			<!-- 按钮 -->
			<view class="main-bg-color text-white font-md d-flex a-center j-center p-0" 
			style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;"
			hover-class="main-bg-hover-color"
			@tap.stop="doHidePopup">
				<text>确定</text>
			</view>
		</common-popup>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue"
	import price from "@/components/common/price.vue"
	import uniNumberBox from "@/components/uni-ui/uni-number-box/uni-number-box.vue"
	import commonPopup from "@/components/common/common-popup.vue"
	import zcmRadioGroup from "@/components/common/radio-group.vue"
	import card from "@/components/common/card.vue"
	import {mapState, mapGetters, mapActions, mapMutations} from "vuex"
	import commonList from "@/components/common/common-list.vue"
	import loading from "@/common/mixin/loading.js"
	
	export default {
		mixins: [loading],
		
		components: {
			uniNavBar,
			price,
			uniNumberBox,
			card,
			zcmRadioGroup,
			commonPopup,
			commonList,
		},
		
		data() {
			return {
				
				
				isedit: false,
				hotList: [
					{
						cover: "/static/images/demo/22.png",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					}
				],
			}
		},
		
		onLoad() {

		},
		

		
		computed: {
			...mapState({
				list: state => state.cart.list,
				popupShow: state => state.cart.popupShow
			}),
			...mapGetters(['checkedAll', 'totalPrice', 'disableSelectAll',
				'popupData'
			])
		},
		
		methods: {
			changeNum(e, item, index) {
				item.num = e
			},
			...mapActions(['doSelectAll', 'doDelGoods', 'doShowPopup', 'doHidePopup']),
			...mapMutations(['selectItem']),
			
			//订单结算
			orderConfirm() {
				uni.navigateTo({
					url: '../order-confirm/order-confirm'
				});
			}
		}
	}
</script>

<style>

</style>
